<template>
  <div class="yxp-index" style="min-height:600px;">
    <div class="yxp-word">
      <img src="@/assets/word/back-icon.png" class="back-prev" id="yxp-back-word" @click="handleBack" />
      <div class="yxp-word-top">
        <h3 class="yxp-word-top-tit">九宫动态双循环筛查系统</h3>
        <p class="yxp-word-top-entry synclock" id="yxp:word:index:7" @click="handleSelectLexicon">{{title}}<img src="@/assets/word/course-icon.png" class="arrow"/></p>
      </div>
      <div class="yxp-word-main">
        <div class="yxp-word-main-left word-slider">
          <div class="yxp-canvas">
              <div class="loop-pie">
                  <div class="loop-pie-line loop-pie-r">
                      <div class="loop-pie-c loop-pie-rm" id="loop-rc-0" ></div>
                  </div>
                  <div class="loop-pie-line loop-pie-l">
                      <div class="loop-pie-c loop-pie-lm" id="loop-lc-0"></div>
                  </div>
                  <div class="loop-pie-text" id="loop-pie-text-0">0%</div>
              </div>
            <p class="text">学习进度</p>
          </div>
          <div class="yxp-canvas">
               <div class="loop-pie">
                  <div class="loop-pie-line loop-pie-r">
                      <div class="loop-pie-c loop-pie-rm" id="loop-rc-1"></div>
                  </div>
                  <div class="loop-pie-line loop-pie-l">
                      <div class="loop-pie-c loop-pie-lm" id="loop-lc-1"></div>
                  </div>
                  <div class="loop-pie-text" id="loop-pie-text-1">0%</div>
              </div>
            <p class="text">复习进度</p>
          </div>
        </div>
        <div class="yxp-word-main-center" v-if="wordStatus.square_total &&  wordStatus.square_total.length > 0">
          <div class="circle-center" :class="{'blow': isStart}" id="yxp-index-start" @click="handleStart">START</div>
          <div class="center-box" :class="{'on': isRotate, 'out': isStart}">
            <div class="circle-slider" id="yxp-index-circle1" @click="handleOther(id > 0 ? wordStatus.square_total[4] : 0,4)">
              <span>{{id > 0 ? wordStatus.square_total[4] : 0}}</span>
            </div>
            <div class="circle-slider" id="yxp-index-circle2" @click="handleOther(id > 0 ? wordStatus.square_total[5] : 0,5)">
              <span>{{id > 0 ? wordStatus.square_total[5] : 0}}</span>
            </div>
            <div class="circle-slider" id="yxp-index-circle3" @click="handleOther(id > 0 ? wordStatus.square_total[6] : 0,6)">
              <span>{{id > 0 ? wordStatus.square_total[6] : 0}}</span>
            </div>
            <div class="circle-slider" id="yxp-index-circle4" @click="handleGreen(id > 0 ? wordStatus.square_total[7] : 0)">
              <span>{{id > 0 ? wordStatus.square_total[7] : 0}}</span>
            </div>
            <div class="circle-slider" id="yxp-index-circle5" @click="handleRed(id > 0 ? wordStatus.square_total[0] : 0)">
              <span>{{id > 0 ? wordStatus.square_total[0] : 0}}</span>
            </div>
            <div class="circle-slider" id="yxp-index-circle6" @click="handleOther(id > 0 ? wordStatus.square_total[1] : 0,1)">
              <span>{{id > 0 ? wordStatus.square_total[1] : 0}}</span>
            </div>
            <div class="circle-slider" id="yxp-index-circle7" @click="handleOther(id > 0 ? wordStatus.square_total[2] : 0,2)">
              <span>{{id > 0 ? wordStatus.square_total[2] : 0}}</span>
            </div>
            <div class="circle-slider" id="yxp-index-circle8" @click="handleOther(id > 0 ? wordStatus.square_total[3] : 0,3)">
              <span>{{id > 0 ? wordStatus.square_total[3] :  0}}</span>
            </div>
          </div>
        </div>
        <div class="yxp-word-main-right word-slider">
          <div class="right-box">
            <div class="yxp-slider-r-item" @click="handleRemeber">
              <h3 class="num">{{wordStatus.today_remember}}</h3>
              <p class="text">今日识记</p>
            </div>
            <div class="yxp-slider-r-item" @click="handleReview">
              <h3 class="num">{{wordStatus.today_review}}</h3>
              <p class="text">一眼会</p>
            </div>
            <div class="yxp-slider-r-item" @click="handleTotal">
              <h3 class="num">{{wordStatus.has_remember}}</h3>
              <p class="text">累计学习</p>
            </div>
<!--            <div class="last-item">-->
<!--              <h3 class="num">{{wordStatus.all_time}}</h3>-->
<!--              <p class="text">学习时长</p>-->
<!--            </div>-->
          </div>
        </div>
      </div>
      <div class="yxp-word-study" @click="hancleReview" id="yxp-index-review">
          <img src="@/assets/word/study-icon.png" />自主复习
      </div>
    </div>
    <div class="mark" v-if="isPop || isCheck || isMemory || isReview  || isRemember || isRestart"></div>
    <div class="yxp-word-select" v-if="isPop">
      <img src="@/assets/word/lexicon-icon.png" class="lexicon-icon"/>
      <p class="title">请先选择词库再进行学习</p>
      <div class="btn" @click="handleSelectLexicon" id="yxp-index-lexicion">选择词库</div>
    </div>
    <div class="yxp-word-check" v-if="isCheck">
      <div class="close" @click="handleClose">
        <img src="@/assets/word/close-icon.png" />
      </div>
      <img src="@/assets/word/word-check.png" class="check"/>
      <p class="tips">{{detail}}</p>
      <div class="btn" @click="handleCheck">
        <div class="btn-item">开始{{text}}</div>
      </div>
    </div>
    <div class="yxp-word-check" v-if="isReview">
      <div class="close" @click="handleClose">
        <img src="@/assets/word/close-icon.png" />
      </div>
      <img src="@/assets/word/word-review.png" class="check"/>
      <p class="tips">{{detail}}</p>
      <div class="btn">
        <div class="btn-item1" @click="handleStartReview" id="yxp-index-review1">开始复习</div>
        <div class="btn-item1" @click="handleStudy" id="yxp-index-study">继续学习</div>
      </div>
    </div>
    <div class="yxp-word-check" v-if="isRemember">
      <div class="close" @click="handleClose">
        <img src="@/assets/word/close-icon.png" />
      </div>
      <img src="@/assets/word/word-remember.png" class="check"/>
      <p class="tips">{{detail}}</p>
      <div class="btn">
        <div class="btn-item1 bg-warn" @click="handleRest" id="yxp-index-rest">休息一下</div>
        <div class="btn-item1" @click="handleCheckWord" id="yxp-index-check" v-if="is_doubleminus">确定</div>
        <div class="btn-item1" @click="handleCheckWord" id="yxp-index-check" v-else>选择词库</div>
      </div>
    </div>
    <div class="yxp-word-check" v-if="isMemory">
      <div class="close" @click="handleClose">
        <img src="@/assets/word/close-icon.png" />
      </div>
      <img src="@/assets/word/word-check.png" class="check"/>
      <p class="tips">{{detail}}</p>
      <div class="btn" @click="handleMemory" id="yxp-index-memory">
        <div class="btn-item">继续识记</div>
      </div>
    </div>
    <div class="yxp-word-check" v-if="isRestart">
      <div class="close" @click="handleClose">
        <img src="@/assets/word/close-icon.png" />
      </div>
      <img src="@/assets/word/word-check.png" class="check"/>
      <p class="tips">{{detail}}</p>
      <div class="btn" @click="startnewround" id="yxp-index-restart">
        <div class="btn-item">确定</div>
      </div>
    </div>
      <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import { wordIndex, wordpackagestatus, reciteword, getreviewWords,startnewround } from '@/services/word.js'
import { startTime, stopTime } from '@/services/home.js'
import storage from '@/utils/storage.js'
import Timetips from "@/components/Timetips";
let data = {
  square_total: [0,0,0,0,0,0,0,0],
  today_remember: 0,
  today_review: 0,
  has_remember: 0,
  all_time: 0,
  review_percent: 0,
  study_percent: 0
}
export default {
  inject:['reload'],//注入依赖
  name: 'wordRemember',
  components: {
    Timetips
  },
  data() {
    return {
      isRotate: false,
      isStart: false,
      radius: 145,
      isShow: false,
      isPop: false, // 是否有词库
      isCheck: false, // 是否有待检测
      isReview: false, // 是否有复习
      isMemory: false, // 是否有识记
      isRemember: false, // 是否完成识记
      isRestart: false, // 是否开启新一轮学习
      isBack: false,
      text: '', // 检测弹窗文案
      wordStatus: data,
      wordCheck: {},
      studyData: [],
      detail: 0,
      package_id: 0,
      course_type: 0,
      title: '',
      id: 0,
      total: 0,
      is_doubleminus:sessionStorage.getItem('doubleminus_type'),
      postpaid:sessionStorage.getItem('postpaid'),
      last_package_id:sessionStorage.getItem('last_package_id'),
    }
  },
  watch: {
   //方法2
  '$route'(to, from) {
    if (to.path == "/wordLexicon") {  /// 判断条件2  监听路由名 监听你从什么路由跳转过来的
       this.package_id = 1
    }
  }

  },
  created () {
    console.log(this.$route)
    console.log('wordstart')
    console.log("开始渲染数据" + this.$route.query.package_id)
    if (this.$route.query.package_id) {
      console.log(this.$route.query.package_id)
      this.package_id = +this.$route.query.package_id
      this.title = this.$route.query.title
      if (this.package_id === 0) {
        this.isBack = true
        this.wordStatus = data
        this.title = '请选择词库'
        setTimeout(() => {
          this.getCanvas()
        }, 100)
        return
      } else {
        this.getWordStatus()
      }
    } else {
      console.log("没获取到id")
      this.getIndex()
    }
    storage.remove('dataList')
    storage.remove('beforeWord')
    storage.remove('afterWord')
    storage.remove('paperData')
  },

  methods: {
    // 获取当前词库
    async getIndex () {
      this.$loading.show()
      let data = await wordIndex({})
      if (data.code === 1) {
        if (data.data.id) {
          this.id = +data.data.id
        }
        if (this.id !== 0) {
          this.package_id = data.data.id
          this.title = data.data.level_title
          this.course_type = data.data.course_type
          this.getWordStatus()
        } else {
          this.$loading.hide()
          this.title = '请选择词库'
          this.isPop = true
        }
      } else if (data.code === '10001' || data.code === 10001) {
        this.$loading.hide()
        this.$toast('token过期，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    // 获取单词识记
    async getWordStatus () {
      if(this.package_id == 1 || this.package_id == undefined || this.package_id == '' || this.package_id == 0){
        return false;
      }else {
		//判断是否切换了课程  如果切换了则停止上一课成  开启下一课程计时
        console.log('-------------------------'+this.last_package_id);
        console.log('-------------------------'+this.package_id);
		if(this.last_package_id != undefined && this.last_package_id > 0 && this.last_package_id != null){
			if(this.package_id != this.last_package_id){
				// this.stoptime();
				sessionStorage.setItem('last_package_id',this.package_id)
                this.last_package_id = this.package_id
				// this.starttime();
			}
		}else{
			sessionStorage.setItem('last_package_id',this.package_id)
            this.last_package_id = this.package_id
			// this.starttime();
		}
        this.$loading.show()
        let data = await wordpackagestatus({package_id: this.package_id})
        if (data.code === 1) {
          this.$loading.hide()
          this.wordStatus = data.data
          this.course_type = data.data.course_type
          this.id = 1
          setTimeout(() => {
            this.getCanvas()
          }, 100)
        } else if (data.code === '10001' || data.code === 10001) {
          this.$loading.hide()
          this.$toast('token过期，请重新登录')
        } else {
          this.$loading.hide()
          this.$toast(data.info)
        }
      }
    },
    // 获取识记单词
    async getReciteword () {
      this.$loading.show()
      let params = {
        lat: '',
        lng: '',
        package_id: this.package_id,
        page: 1
      }
      let data = await reciteword(params)
      if (data.code === 1) {
        this.$loading.hide()
        let type = parseInt(data.data.type)
        let page = 0
        let studyData = []
        let wordData = []
        this.total = data.data.total
        if (data.data.to_study && data.data.to_study.length > 0) {
          studyData = data.data.to_study
          this.studyData = studyData
          page = Math.ceil(studyData.length / 5)
        }
        switch(type) {
          case 1:
            storage.set('beforeWord',studyData)
            this.$router.push({
              path: '/wordRemember/beforeStudy',
              query: {
                study_model: this.wordStatus.study_model,
                course_type: this.course_type,
                package_id: this.package_id,
                total: this.total,
                title: this.title
              }
            })
            break;
          case 11008:
            this.detail = data.data.detail
            this.isReview = true
            break;
          case 11009:
            this.detail = data.data.detail
            this.isRemember = true
            break;
          case 11019:
            this.isRemember = true
            this.detail = data.data.detail
            break;
          case 11041:
            this.detail = '您已完成本课程全部内容学习,是否继续'
            this.isRemember = true
            break;
          case 11040:
            this.isRestart = true
            this.detail = '您已完成本课程学习,是否开启下一轮学习'
            break;
          case 11016:
            this.text = '检查'
            this.isCheck = true
            this.detail = data.data.detail
            wordData = []
            for (let i = 0; i < page; i++) {
              let start = i * 5
              let end = (i + 1) * 5
              let data = studyData.slice(start, end)
              let obj = {
                page: i + 1,
                status: false,
                isCheck: false,
                isEnd: true,
                data: data
              }
              wordData.push(obj)
            }
            storage.set('paperData', wordData)
            break;
          case 11017:
            this.detail = data.data.detail
            this.isMemory = true
            wordData = []
            for (let i = 0; i < page; i++) {
              let start = i * 5
              let end = (i + 1) * 5
              let data = studyData.slice(start, end)
              let obj = {
                page: i + 1,
                status: false,
                isCheck: false,
                isEnd: false,
                data: data
              }
              wordData.push(obj)
            }
            storage.set('paperData', wordData)
           // storage.set('dataList', studyData)
            break;
          case 11020:
            this.text = '筛查'
            this.detail = data.data.detail
            this.isCheck = true
            break;
          default:
            break;
        }
      } else if (data.code === '10001' || data.code === 10001) {
        this.$loading.hide()
        this.$toast('token过期，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    // 切换词库
    handleSelectLexicon () {
      setTimeout(() => {
        this.$router.push({
          path: '/wordRemember/wordLexicon',
          query: {
            package_id: this.package_id,
            title: this.title
          }
        })
      },300)
    },
    // 开始检测
    handleCheck () {
      this.isCheck = false
      this.isStart = true
      setTimeout(() => {
        if (this.text === '检查') {
          this.$router.push({
            path: '/wordRemember/afterStudy',
            query: {
              package_id: this.package_id,
              course_type: this.course_type,
            }
          })
        } else {
          this.$router.push({
            path: '/wordRemember/familiar',
            query: {
              package_id: this.package_id,
              title: this.title,
              square_type: 8
            }
          })
        }
      }, 300);
    },
    // 单词识记
    handleMemory () {
      this.isMemory = false
      this.isStart = true
      setTimeout(() => {
        this.$router.push({
          path: '/wordRemember/wordMemory',
          query: {
            package_id: this.package_id,
            course_type: this.course_type
          }
        })
      }, 300);
    },
    //开启新一轮学习
    async startnewround () {
      this.isRestart = false
      this.isStart = true
      this.$loading.show()
      let params = {
        package_id: this.package_id
      }
      let data = await startnewround(params)
      if (data.code === 1) {
        this.$loading.hide()
        this.reload()
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    // 自主复习
    handleStartReview () {
      this.isReview = false
      this.isStart = true
      setTimeout(() => {
        this.$router.push({
          path: '/wordRemember/wordReview',
          query: {
            package_id: this.package_id
          }
        })
      }, 300);
    },
    // 继续学习
    handleStudy () {
      storage.set('beforeWord',this.studyData)
      this.isReview = false
      this.isStart = true
      setTimeout(() => {
        this.$router.push({
          path: '/wordRemember/beforeStudy',
          query: {
            study_model: this.wordStatus.study_model,
            course_type: this.course_type,
            package_id: this.package_id,
            total: this.total
          }
        })
      },300)
    },
    // 选择词库
    handleCheckWord () {
      this.isRemember = false
      this.isStart = true
      if(this.postpaid == 0){//自有课程
        setTimeout(() => {
          this.$router.push({
            path: '/wordRemember/selectstartstudy',
            query: {
              package_id: this.package_id,
              title: this.title
            }
          })
        }, 300);
      }else{
        setTimeout(() => {
          this.$router.push({
            path: '/wordRemember/wordLexicon',
            query: {
              package_id: 1,
              // title: this.title
            }
          })
        }, 300);
      }
    },
    //休息一下
    handleRest () {
      this.isRemember = false
    },
    // 红格事件
    handleRed (num) {
      if (num === 0) {
        this.$toast('该unit中没有词')
      } else {
        this.$router.push({
          path: '/wordRemember/wordList',
          query: {
            package_id: this.package_id,
            square_type: 1
          }
        })
      }
    },
    // 1-6格子事件
    handleOther (num, type) {
      if (num === 0) {
        this.$toast('该unit中没有词')
      } else {
        let path = ''
        if (this.wordStatus.study_model === 1) {
          path = '/wordRemember/wordIndex'
        } else if (this.wordStatus.study_model === 2) {
          path = '/wordRemember/smartIndex'
        }
        this.$router.push({
          path: path,
          query: {
            package_id: this.package_id,
            square_type: type + 1,
            title:this.title
          }
        })
      }
    },
    // 绿格事件
    handleGreen (num) {
      if (num === 0) {
        this.$toast('该unit中没有词')
      } else {
        this.$router.push({
          path: '/wordRemember/familiar',
          query: {
            package_id: this.package_id,
            title: this.title,
            square_type: 8
          }
        })
      }
    },
    // 今日识记
    handleRemeber () {
      this.$router.push({
        path: '/wordRemember/wordList',
        query: {
          package_id: this.package_id,
          type: 'today_study'
        }
      })
    },
    // 一眼会
    handleReview () {
      this.$router.push({
        path: '/wordRemember/wordList',
        query: {
          package_id: this.package_id,
          type: 'today_review'
        }
      })
    },
    // 累计单词
    handleTotal () {
      this.$router.push({
        path: '/wordRemember/wordList',
        query: {
          package_id: this.package_id,
          type: 'all'
        }
      })
    },
    // 自主复习
    async hancleReview () {
      if (this.package_id === 0) {
        this.isPop = true
        return
      }
      this.$loading.show()
      let params = {
        package_id: this.package_id,
        page: 1
      }
      let data = await getreviewWords(params)
      if (data.code === 1) {
        this.$loading.hide()
        let type = parseInt(data.data.type)
        let studyData = data.data.to_study
        this.studyData = studyData
        let page = Math.ceil(studyData.length / 5)
        let wordData = []
        page = Math.ceil(studyData.length / 5)
        switch(type) {
          case 1:
            this.$router.push({
              path: '/wordRemember/wordReview',
              query: {
                package_id: this.package_id,
                title:this.title
              }
            })
            break;
          case 11009:
            this.isRemember = true;
            this.detail = data.data.detail
            break;
          case 11019:
              this.isRemember = true
              this.detail = data.data.detail
            break;
          case 11040:
            this.isRemember = true;
              this.detail = '您已完成本课程学习,是否开启下一轮学习'
            break;
          case 11041:
              this.isRestart = true
              this.detail = '您已完成本课程学习,是否开启下一轮学习'
            break;
          case 11016:
            this.text = '检查'
            this.isCheck = true
            this.detail = data.data.detail
            wordData = []
            for (let i = 0; i < page; i++) {
              let start = i * 5
              let end = (i + 1) * 5
              let data = studyData.slice(start, end)
              let obj = {
                page: i + 1,
                status: false,
                isCheck: false,
                isEnd: true,
                data: data
              }
              wordData.push(obj)
            }
            // data.data.to_study.map(item => {
            //   item.num = 0
            //   item.isSuccess = false
            //   item.isError = false
            // })
            storage.set('paperData', wordData)
            break;
          case 11017:
            this.isMemory = true
            this.detail = data.data.detail
            wordData = []
            for (let i = 0; i < page; i++) {
              let start = i * 5
              let end = (i + 1) * 5
              let data = studyData.slice(start, end)
              let obj = {
                page: i + 1,
                status: false,
                isEnd: false,
                isCheck: false,
                data: data
              }
              wordData.push(obj)
            }
            storage.set('paperData', wordData)
            // storage.set('dataList', studyData)
            break;
          case 11020:
            this.text = '筛查'
            this.detail = data.data.detail
            this.isCheck = true
            break;
          default:
            break;
        }
      } else if (data.code === '10001' || data.code === 10001) {
        this.$loading.hide()
        this.$toast('token过期，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }

    },
    loadPercent(x, y,index) {
        var rotate = (x / y) * 360
        var rotateRight = 0
        var rotateLeft = 0
        if (rotate < 180) {
            rotateRight = rotate + (-45)

        } else {
            rotateRight = 135
            rotateLeft = (rotate - 180 - 45)
            document.getElementById("loop-lc-"+index).style.transform="rotate(" + rotateLeft + "deg)";
        }
        document.getElementById("loop-rc-"+index).style.transform="rotate(" + rotateRight + "deg)";
        document.getElementById("loop-pie-text-"+index).innerHTML = x+'%'
    },
    getCanvas () {
      const { study_percent, review_percent } = this.wordStatus
       this.loadPercent(study_percent, 100, 0)
       this.loadPercent(review_percent, 100, 1)
      console.log('this.wordStatus.review_percent---',this.wordStatus)

    },
    handleStart () {
      if (this.package_id === 0) {
        this.isPop = true
        return
      }
      this.isRotate = true
      this.getReciteword()
    },
    handleClose () {
      this.isPop = false
      this.isCheck = false
      this.isReview = false
      this.isMemory = false
      this.isRemember = false
      this.isReview = false
      this.isRotate = false
      this.isRestart = false
      this.isreFresh = false
    },
async starttime () {
  let params = {
	package_id: this.package_id
  }
  let data = await startTime(params)
  if (data.code === 1) {
	console.log('start time success');
  } else {	
	this.$toast(data.info);
	console.log('start time fail');
	sessionStorage.setItem('last_package_id',0)
	this.last_package_id = 0;
	this.$router.replace({
		path: '/'
	})
	return false;
  }
},
async stoptime () {
  // let params = {
  //   package_id: this.last_package_id
  // }
  // let data = await stopTime(params)
  // if (data.code === 1) {
  //   console.log('stop time success');
  // } else {
  //   console.log('stop time fail');
  // }
},
    handleBack () {
      // this.stoptime();
      sessionStorage.setItem('last_package_id',0)
      this.last_package_id = 0;
      this.$router.replace({
        path: '/'
      })
    }
  },
  beforeDestroy() {
    console.log("wordRemember/index")
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  }
}
</script>
<style lang="less" scoped>
@keyframes move {
  0% {
    transform: rotate(30deg)
  }
  25% {
    transform: rotate(-30deg)
  }
  50% {
    transform: rotate(30deg)
  }
  75% {
    transform: rotate(-30deg)
  }
  100% {
    transform: rotate(0deg)
  }
}
@keyframes start {
  0% {
    transform: scale(1) rotate(30deg)
  }
  25% {
    transform: scale(.8) rotate(-30deg)
  }
  50% {
    transform: scale(.6) rotate(30deg)
  }
  75% {
    transform: scale(.4) rotate(-30deg)
  }
  100% {
    transform: scale(0) rotate(0deg)
  }
}
@keyframes blow {
  0% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(1.1)
  }
}
.font-20{
  font-size: 20px!important;
}

.bg-warn{
  background-color: #E3C66A!important;
}
.yxp-index {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background:#CFE6DC url(../../../assets/word/word-index-bg.png) center / 100% 100% no-repeat;
  box-sizing: border-box;
  background-size: cover;
}
.yxp-word {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  min-height: 500px;
  background: rgba(255,255,255,.8);
  box-shadow:0px 3px 30px rgba(22,131,18,0.16);
  border-radius: 20px;
  overflow: auto;
  .back-prev {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 30px;
    height: 27px;
    cursor: pointer;
  }
  &-top {
    text-align: center;
    &-tit {
      font-weight: bold;
      color: #27BFA3;
    }
    &-entry {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #454545;
      cursor: pointer;
      .arrow {
        display: inline-block;
        width: 15px;
        height: 15px;
      }
    }
  }
  &-main {
    display: flex;
    justify-content: center;
    text-align: center;
    height: 100%;
    .word-slider {
      background: #E9F4ED;
      border-radius: 10px;
    }
    &-right {
      .last-item {
        font-size: 24px;
        font-family: Klavika;
        font-weight: 500;
        cursor: pointer;
        .num {
          color: #163622;
          font-size: 24px;
          font-family: Klavika;
          font-weight: 500;
        }
        .text {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #163622;
          line-height: 10px;
        }
      }
      .yxp-slider-r-item {
        font-size: 24px;
        font-family: Klavika;
        font-weight: 500;
        cursor: pointer;
        margin-top: 15px;
        &:hover {
          border:1px solid rgba(22,54,34,1);
          border-radius: 10px;
        }
        .num {
          color: #163622;
          font-size: 24px;
          font-family: Klavika;
          font-weight: 500;
        }
        .text {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #163622;
          line-height: 10px;
        }
      }
    }
    &-center {
      position: relative;
      .on {
        animation: move .3s ease-out;
      }
      .out {
        z-index: 10;
        animation: start .3s ease-out;
      }
      .blow {
        animation: blow .3s ease-out;
      }
      .center-box {
        position: absolute;
        left: 0;
        top: 0;
      }
      .circle-center {
        position: absolute;
        text-align: center;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        font-family: 'Microsoft YaHei';
        background: url(../../../assets/word/start.png) no-repeat center center;
        background-size: 100% 100%;
        cursor: pointer;
        z-index: 5;
        transition: transform 0.3s;
        &:hover {
          transform: scale(1.1);
        }
      }
      .circle-slider {
        position: absolute;
        text-align: center;
        font-size: 30px;
        font-family: 'Klavika';
        font-weight: 500;
        color: #fff;
        opacity: 1;
        border-radius: 50%;
        background: #5DD082;
        background-size: 100% 100%;
        cursor: pointer;
        transition: transform 0.3s;
        &:hover {
          transform: scale(1.1);
        }
        &:nth-child(1) {
          background: url(../../../assets/word/1.png) no-repeat center center;
          box-shadow:3px 3px 10px rgba(237,165,2,0.4);
        }
        &:nth-child(2) {
          background-image: url(../../../assets/word/2.png);
           box-shadow:3px 3px 10px rgba(9,163,240,0.4);
        }
        &:nth-child(3) {
          background-image: url(../../../assets/word/3.png);
           box-shadow:3px 3px 20px rgba(19,88,244,0.4);
        }
        &:nth-child(4) {
          background-image: url(../../../assets/word/4.png);
          box-shadow:0px 5px 20px rgba(39,191,163,0.5);
        }
        &:nth-child(5) {
          background-image: url(../../../assets/word/5.png);
           box-shadow:3px 3px 10px rgba(248,132,146,0.4);
        }
        &:nth-child(6) {
          background-image: url(../../../assets/word/6.png);
           box-shadow:3px 3px 10px rgba(248,132,146,0.4);
        }
        &:nth-child(7) {
          background-image: url(../../../assets/word/7.png);
           box-shadow:3px 3px 10px rgba(248,132,146,0.4);
        }
        &:nth-child(8) {
          background-image: url(../../../assets/word/8.png);
           box-shadow:3px 3px 10px rgba(248,132,146,0.4);
        }
      }
    }
  }
  &-study {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:Microsoft YaHei;
    font-weight:400;
    line-height:26px;
    color:rgba(255,255,255,1);
    background: #3BC9A4;
    box-shadow:0px 5px 10px rgba(59,201,164,0.3);
    border-radius: 35px;
    cursor: pointer;
    img {
      width: 20.12px;
      height: 20.05px;
      margin-right: 10px;
    }
    &:hover {
      background:linear-gradient(180deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
    }
    &:active {
      background:linear-gradient(180deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
    }
  }
}
.yxp-word-select {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 360px;
  height: 331px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  z-index: 999;
  .lexicon-icon {
    display: inline-block;
    width: 138px;
    height: 110px;
    margin-top: 37px;
  }
  .title {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin-top: 34px;
  }
  .btn {
    width: 280px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fff;
    background: #27BFA3;
    border-radius: 100px;
    margin: 30px auto 0;
    cursor: pointer;
    &:hover {
      background: #18A38A;
    }
  }
}
.yxp-word-check {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 330px;
  height: 398px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 1000;
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .check {
    display: inline-block;
    width: 190px;
    height: 190px;
    margin: 25px auto 0;
  }
  .tips {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto 0;
    &-item {
      width: 280px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background: #27BFA3;
      border-radius: 100px;
      cursor: pointer;
      &:hover {
        background: #18A38A;
      }
    }
    &-item1 {
      width: 130px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background: #27BFA3;
      border-radius: 100px;
      cursor: pointer;
      &:first-child {
        margin-right: 15px;
      }
      &:hover {
        background: #18A38A;
      }
    }
  }
}
.canvas-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loop-pie {
	position:relative;
	width:52px;
  height:52px;
  margin:0 auto;
  &-text {
    height: 52px;
    line-height: 52px;
    font-size: 18px;
    font-family: Klavika;
    font-weight: 500;
    color: #454545;
    letter-spacing:-1px;
  }
}
.loop-pie-line {
	position:absolute;
	width:50%;
	height:100%;
	top:0;
	overflow:hidden;
}
.loop-pie-l {
	top:0px;
	left:0px;
}
.loop-pie-r {
	top:0px;
	-webkit-transform:rotate(180deg);
	right:0px
}
.loop-pie-c {
	width:200%;
	height:100%;
	border:5px solid transparent;
	border-radius:50%;
	position:absolute;
	box-sizing:border-box;
	top:0;
	-webkit-transform:rotate(-45deg);
}
.loop-pie-rm {
	border-top:5px solid #D2E8DA;
	border-left:5px solid #D2E8DA;
	border-bottom:5px solid #88B496;
	border-right:5px solid #88B496;
}
.loop-pie-lm {
	border-top:5px solid #D2E8DA;
	border-left:5px solid #D2E8DA;
	border-bottom:5px solid #88B496;
	border-right:5px solid #88B496;
}
</style>
